<template>
  <div class="app-container home-page">
    <!-- 用户个人信息板块 -->
    <el-card class="info-card user-info">
      <div slot="header" class="card-header">
        <i class="el-icon-user-solid header-icon"></i>
        <span class="header-title">个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="avatar-section">
          <el-avatar :size="120" :src="userInfo.avatar" icon="el-icon-user-solid"></el-avatar>
          <div class="user-status">
            <el-tag type="success" effect="dark">在校生</el-tag>
          </div>
        </div>
        <div class="user-details">
          <el-descriptions :column="2" :border="false">
            <el-descriptions-item label="姓名" class="detail-item">{{ userInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="学号" class="detail-item">{{ userInfo.studentId }}</el-descriptions-item>
            <el-descriptions-item label="专业" class="detail-item">{{ userInfo.major }}</el-descriptions-item>
            <el-descriptions-item label="班级" class="detail-item">{{ userInfo.className }}</el-descriptions-item>
            <el-descriptions-item label="联系方式" class="detail-item">{{ userInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱" class="detail-item">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="指导教师" class="detail-item">{{ userInfo.advisor }}</el-descriptions-item>
            <el-descriptions-item label="入学时间" class="detail-item">{{ userInfo.enrollmentDate }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="info-card thesis-info" style="margin-top: 20px;">
      <div slot="header" class="card-header">
        <i class="el-icon-document-checked header-icon"></i>
        <span class="header-title">毕业论文基本信息</span>
      </div>
      <div class="thesis-basic-info">
        <el-descriptions :column="1" border class="thesis-description">
          <el-descriptions-item label="论文题目" class="thesis-title-item">
            <h3 class="thesis-title">{{ thesisInfo.title }}</h3>
          </el-descriptions-item>
          <el-descriptions-item label="学科专业" class="thesis-item">{{ thesisInfo.discipline }}</el-descriptions-item>
          <el-descriptions-item label="研究方向" class="thesis-item">{{ thesisInfo.researchDirection }}</el-descriptions-item>
          <el-descriptions-item label="论文类型" class="thesis-item">{{ thesisInfo.type }}</el-descriptions-item>
          <el-descriptions-item label="完成时间" class="thesis-item">{{ thesisInfo.completionDate }}</el-descriptions-item>
          <el-descriptions-item label="关键词" class="thesis-item">
            <el-tag v-for="(keyword, index) in thesisInfo.keywords" :key="index" type="primary" size="small" effect="plain" style="margin-right: 8px;">
              {{ keyword }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="摘要" class="thesis-abstract">
            <div class="abstract-content">{{ thesisInfo.abstract }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 毕业论文成果详细介绍板块 -->
    <el-card class="info-card thesis-achievements" style="margin-top: 20px;">
      <div slot="header" class="card-header">
        <i class="el-icon-medal header-icon"></i>
        <span class="header-title">毕业论文成果详细介绍</span>
      </div>
      <el-tabs v-model="activeTab" type="border-card" class="achievements-tabs">
        <el-tab-pane label="研究成果" name="achievements">
          <div class="achievements-content">
            <el-timeline :reverse="false">
              <el-timeline-item
                v-for="(achievement, index) in achievementsList"
                :key="index"
                :timestamp="achievement.time"
                placement="top"
                type="success"
              >
                <el-card class="achievement-card">
                  <h4 class="achievement-title">{{ achievement.title }}</h4>
                  <p class="achievement-description">{{ achievement.description }}</p>
                  <div v-if="achievement.files && achievement.files.length > 0" class="achievement-files">
                    <el-divider content-position="left">相关文件</el-divider>
                    <el-upload
                      class="file-list"
                      :file-list="achievement.files"
                      :disabled="true"
                      :on-preview="handleFilePreview"
                      list-type="text"
                    >
                    </el-upload>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="技术实现" name="implementation">
          <div class="implementation-content">
            <div class="tech-stack">
              <h4 class="section-title">技术栈</h4>
              <div class="tech-grid">
                <div v-for="(tech, index) in techStack" :key="index" class="tech-item">
                  <div class="tech-icon">{{ tech.icon }}</div>
                  <div class="tech-name">{{ tech.name }}</div>
                  <div class="tech-version">{{ tech.version }}</div>
                </div>
              </div>
            </div>
            
            <div class="system-architecture" style="margin-top: 30px;">
              <h4 class="section-title">系统架构</h4>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="架构模式" class="architecture-item">{{ systemInfo.architecture }}</el-descriptions-item>
                <el-descriptions-item label="数据库" class="architecture-item">{{ systemInfo.database }}</el-descriptions-item>
                <el-descriptions-item label="前端框架" class="architecture-item">{{ systemInfo.frontend }}</el-descriptions-item>
                <el-descriptions-item label="后端框架" class="architecture-item">{{ systemInfo.backend }}</el-descriptions-item>
                <el-descriptions-item label="部署环境" class="architecture-item">{{ systemInfo.deployment }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="实验结果" name="results">
          <div class="results-content">
            <div class="metrics">
              <h4 class="section-title">性能指标</h4>
              <div class="metrics-grid">
                <el-statistic
                  v-for="(metric, index) in performanceMetrics"
                  :key="index"
                  class="metric-item"
                  :title="metric.name"
                  :value="metric.value"
                  :precision="metric.precision || 2"
                  :suffix="metric.suffix || ''"
                  :value-style="{ color: metric.color || '#3f8600' }"
                >
                </el-statistic>
              </div>
            </div>
            
            <div class="charts" style="margin-top: 30px;">
              <h4 class="section-title">对比分析</h4>
              <div class="chart-placeholder">
                <p>此处将展示实验结果图表</p>
                <div class="chart-mockup">
                  <div class="chart-bar" style="height: 85%;"></div>
                  <div class="chart-bar" style="height: 65%;"></div>
                  <div class="chart-bar" style="height: 92%;"></div>
                  <div class="chart-bar" style="height: 75%;"></div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="演示与文档" name="demo">
          <div class="demo-content">
            <div class="demo-section">
              <h4 class="section-title">系统演示</h4>
              <div class="demo-placeholder">
                <i class="el-icon-video-camera icon-large"></i>
                <p>系统功能演示视频</p>
                <el-button type="primary" size="medium" @click="handleDemoPlay">
                  <i class="el-icon-video-play"></i> 观看演示
                </el-button>
              </div>
            </div>
            
            <div class="docs-section" style="margin-top: 30px;">
              <h4 class="section-title">相关文档</h4>
              <el-table :data="documentationList" style="width: 100%;">
                <el-table-column prop="name" label="文档名称" width="300"></el-table-column>
                <el-table-column prop="type" label="文档类型">
                  <template slot-scope="scope">
                    <el-tag size="small" :type="getTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="size" label="文件大小"></el-table-column>
                <el-table-column prop="date" label="更新日期"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleFileDownload(scope.row)">
                      <i class="el-icon-download"></i> 下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PaperChenxiPage',
  data() {
    return {
      activeTab: 'achievements',
      userInfo: {
        name: '陈曦',
        studentId: '20210002',
        major: '计算机科学与技术',
        className: '2021级计科1班',
        phone: '13800138002',
        email: 'chenxi@example.com',
        advisor: '王教授',
        enrollmentDate: '2021年9月',
        avatar: ''
      },
      thesisInfo: {
        title: '基于深度学习的智能问答系统研究',
        discipline: '计算机科学与技术',
        researchDirection: '自然语言处理',
        type: '研究型论文',
        completionDate: '2025年6月',
        keywords: ['深度学习', '智能问答', '自然语言处理', 'BERT模型', '知识图谱'],
        abstract: '本研究针对传统问答系统在理解复杂问题和提供精准答案方面的不足，提出了一种基于深度学习的智能问答系统模型。通过结合BERT预训练模型和知识图谱技术，构建了一个多层次的语义理解架构，实现了对复杂问题的准确理解和回答。实验结果表明，该模型在多个公开数据集上的表现优于现有方法，为智能问答领域提供了新的解决方案。'
      },
      achievementsList: [
        {
          time: '2024年11月',
          title: '发表学术论文',
          description: '在《软件学报》发表论文《基于BERT的智能问答系统设计与实现》',
          files: [
            {
              name: '论文全文.pdf',
              url: '#'
            }
          ]
        },
        {
          time: '2025年2月',
          title: '获得软件著作权',
          description: '申请并获得"智能问答系统V1.0"软件著作权',
          files: [
            {
              name: '著作权证书.pdf',
              url: '#'
            }
          ]
        },
        {
          time: '2025年4月',
          title: '参加学术会议',
          description: '在全国自然语言处理学术会议上做专题报告',
          files: [
            {
              name: '会议报告.pptx',
              url: '#'
            },
            {
              name: '演讲稿.docx',
              url: '#'
            }
          ]
        },
        {
          time: '2025年5月',
          title: '获得校级优秀毕业设计提名',
          description: '毕业论文被评为校级优秀毕业设计提名',
          files: []
        }
      ],
      techStack: [
        { name: 'Python', version: '3.9+', icon: '🐍' },
        { name: 'TensorFlow', version: '2.8.0', icon: '🤖' },
        { name: 'PyTorch', version: '1.10.0', icon: '🔥' },
        { name: 'Vue.js', version: '3.2.0', icon: '🖖' },
        { name: 'Spring Boot', version: '2.6.0', icon: '☕' },
        { name: 'Neo4j', version: '4.4', icon: '🔄' },
        { name: 'MySQL', version: '8.0', icon: '💾' },
        { name: 'Docker', version: '20.10', icon: '🐳' }
      ],
      systemInfo: {
        architecture: '前后端分离架构',
        database: 'MySQL + Neo4j',
        frontend: 'Vue 3 + Element Plus',
        backend: 'Spring Boot + MyBatis Plus',
        deployment: 'Docker容器化部署'
      },
      performanceMetrics: [
        { name: '回答准确率', value: 91.2, suffix: '%', color: '#3f8600' },
        { name: '回答召回率', value: 88.5, suffix: '%', color: '#1890ff' },
        { name: 'F1分数', value: 89.8, suffix: '%', color: '#722ed1' },
        { name: '响应时间', value: 98, suffix: 'ms', color: '#faad14' },
        { name: '用户满意度', value: 94.6, suffix: '%', color: '#52c41a' },
        { name: '每日处理量', value: 85, suffix: '万条', color: '#eb2f96' }
      ],
      documentationList: [
        {
          name: '毕业论文全文.pdf',
          type: '论文',
          size: '2.8MB',
          date: '2025-06-10'
        },
        {
          name: '系统需求规格说明书.docx',
          type: '文档',
          size: '1.2MB',
          date: '2025-02-15'
        },
        {
          name: '系统设计文档.pptx',
          type: '文档',
          size: '4.5MB',
          date: '2025-03-20'
        },
        {
          name: '实验数据.zip',
          type: '数据',
          size: '32.1MB',
          date: '2025-04-30'
        },
        {
          name: '源代码仓库链接.txt',
          type: '文档',
          size: '0.1MB',
          date: '2025-05-20'
        }
      ]
    }
  },
  methods: {
    handleFilePreview(file) {
      this.$notify({
        title: '预览文件',
        message: `文件预览功能待实现: ${file.name}`,
        type: 'info'
      })
    },
    handleFileDownload(row) {
      this.$notify({
        title: '下载文件',
        message: `文件下载功能待实现: ${row.name}`,
        type: 'success'
      })
    },
    handleDemoPlay() {
      this.$notify({
        title: '播放演示',
        message: '系统演示视频播放功能待实现',
        type: 'info'
      })
    },
    getTagType(type) {
      const typeMap = {
        '论文': 'primary',
        '文档': 'success',
        '数据': 'warning'
      }
      return typeMap[type] || 'info'
    }
  }
}
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.info-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}

.header-icon {
  margin-right: 8px;
  color: #409eff;
  font-size: 18px;
}

/* 用户信息样式 */
.user-info-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.avatar-section {
  position: relative;
  margin-right: 40px;
  margin-bottom: 20px;
}

.user-status {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(30%, 30%);
}

.user-details {
  flex: 1;
  min-width: 300px;
}

.detail-item .el-descriptions-item__content {
  font-size: 14px;
  color: #606266;
}

/* 毕业论文基本信息样式 */
.thesis-basic-info {
  padding-top: 10px;
}

.thesis-description .el-descriptions-item__label {
  font-weight: 600;
  color: #303133;
}

.thesis-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2329;
  margin: 0;
}

.thesis-item .el-descriptions-item__content {
  color: #606266;
}

.abstract-content {
  line-height: 1.8;
  color: #606266;
  text-align: justify;
  padding: 10px 0;
}

/* 成果展示样式 */
.achievements-tabs {
  margin-top: 10px;
}

.achievements-content {
  padding: 20px 0;
}

.achievement-card {
  margin-bottom: 10px;
}

.achievement-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  margin-top: 0;
  margin-bottom: 8px;
}

.achievement-description {
  color: #606266;
  line-height: 1.6;
}

/* 技术栈样式 */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.tech-item {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.tech-item:hover {
  background-color: #ecf5ff;
  transform: translateY(-2px);
}

.tech-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.tech-name {
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 5px;
}

.tech-version {
  font-size: 12px;
  color: #909399;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ecf5ff;
}

/* 性能指标样式 */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.metric-item {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

/* 图表占位符样式 */
.chart-placeholder {
  background-color: #f5f7fa;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  color: #909399;
}

.chart-mockup {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 200px;
  margin-top: 20px;
}

.chart-bar {
  width: 40px;
  background-color: #409eff;
  border-radius: 4px 4px 0 0;
  transition: height 1s ease;
}

/* 演示视频占位符样式 */
.demo-placeholder {
  background-color: #f5f7fa;
  padding: 60px 0;
  border-radius: 8px;
  text-align: center;
}

.icon-large {
  font-size: 48px;
  color: #909399;
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .avatar-section {
    margin-bottom: 20px;
  }
  
  .tech-grid,
  .metrics-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .chart-mockup {
    height: 150px;
  }
  
  .chart-bar {
    width: 20px;
  }
}
</style>